<template>
	<view class="gy-select-button" :style="{gridTemplateColumns: `repeat(${ props.columns }, 1fr)`}">
		<view
			class="gy-select-button-item" 
			:class="{selected: props.multiple ? props.modelValue.indexOf(props.prop && props.prop.value ? item[props.prop.value] : item.value) !== -1 : props.modelValue === (props.prop && props.prop.value ? item[props.prop.value] : item.value)}" 
			v-for="(item,index) in props.list" 
			:key="index"
			@click.stop="selectFn(props.prop && props.prop.value ? item[props.prop.value] : item.value, index)" >
			{{ props.prop && props.prop.label ? item[props.prop.label] : item.label }} 
			<text 
				v-if="props.prop && props.prop.explain ? item[props.prop.explain] : item.explain" 
				class="gy_icon_wenhao" 
				@click.stop="showExplainFn(item)"></text>
			<view class="indicate">
				<view class="indicate-icon gy_icon_xuanze"></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	const emits = defineEmits(["update:modelValue", "select"]);
	
	const props = defineProps({
		modelValue: {
		    type: [String, Array, Number]
		},
		columns: {
		    type: Number,
			default: 1
		},
		multiple: {
		    type: Boolean,
			default: false
		},
		page: {
		    type: Object,
			default: null
		},
		prop: {
		    type: Object,
			default: null
		},
		list: {
			type: Array,
			default: () => []
		}
	});
	
	function selectFn(val: any, index: number){
		if(props.multiple){
			let arr: any = JSON.parse(JSON.stringify(props.modelValue));
			if(arr.indexOf(val) !== -1){
				arr.splice(arr.indexOf(val), 1);
			}else{
				arr.push(val);
			}
			let arrs: any = [];
			for (let i = 0; i < arr.length; i++) {
				for (let j = 0; j < props.list.length; j++) {
					if(arr[i] === (props.prop && props.prop.value ? props.list[j][props.prop.value] : props.list[j].value)){
						arrs.push(props.list[j]);
					}
				}
			}
			emits("update:modelValue", arr);
			emits("select", arrs);
		}else{
			emits("update:modelValue", val);
			emits("select", props.list[index]);
		}
	}
	
	function showExplainFn(item: any){
		props.page?.advert(props.prop && props.prop.label ? item[props.prop.label] : item.label, [props.prop && props.prop.explain ? item[props.prop.explain] : item.explain]);
	}
	
</script>

<style lang="scss" scoped>
	.gy-select-button{
		padding: var(--gy-gap);
		display: grid;
		gap: var(--gy-gap);
		.gy-select-button-item{
			position: relative;
			width: 100%;
			@include flex-center-center;
			border-radius: var(--gy-border-radius-medium);
			border: 1rpx solid var(--gy-border-color);
			overflow: hidden;
			padding: 20rpx;
			text{
				font-size: 30rpx;
				margin-left: 10rpx;
				color: var(--gy-color-warning);
			}
			.indicate{
				position: absolute;
				bottom: 0;
				right: -1rpx;
				width: 40rpx;
				height: 40rpx;
				display: none;
				background-color: var(--gy-color-primary);
				clip-path: polygon(100% 0, 100% 100%, 0 100%);
				.indicate-icon{
					position: absolute;
					bottom: 0;
					right: 5rpx;
					color: #ffffff;
					font-size: 18rpx;
				}
			}
		}
		.gy-select-button-item.selected{
			color: var(--gy-color-primary);
			border: 2rpx solid var(--gy-color-primary);
			.indicate{
				display: block;
			}
		}
	}
</style>